<template>
  <view class="home">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-bar">
        <image class="header-logo" src="https://www.enkilife.cn/themes/default/assets2024/logo.png" mode="heightFix" />
        <view class="header-menu" @click="showMenu = true">
          <view class="menu-bar"></view>
          <view class="menu-bar"></view>
          <view class="menu-bar"></view>
        </view>
      </view>
     <view class="search-row" style="position:relative;">
            <!--<div class="search-category-select-wrapper">
              <select class="search-category" v-model="searchCategory">
                <option value="all">全部分类</option>
                <option value="product">产品</option>
                <option value="page">单页</option>
                <option value="article">文章</option>
              </select>
              <span class="select-arrow">▼</span>
            </div> -->
            <input class="search-input" placeholder="请输入货号/产品关键词" v-model="searchValue" @focus="showCharPicker = true" @blur="onInputBlur" />
            <button class="search-btn">
              <svg class="search-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>
                <line x1="16.3" y1="16.3" x2="21" y2="21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
            <view v-if="showCharPicker" class="char-picker-popup" @mousedown.prevent>
              <view class="char-picker-header">
                <view class="char-picker-title">插入特殊字符:</view>
                <view class="char-picker-content-right">
                  <view class="char-picker-row">
                    <text
                      v-for="(char, ci) in specialChars"
                      :key="char"
                      class="char-picker-char"
                      @click="insertChar(char)"
                    >{{ char }}</text>
                  </view>
                  <view class="char-picker-close" @click="showCharPicker = false">收起↑</view>
                </view>
              </view>
            </view>
          </view>


      <view v-if="showImagePicker" class="image-picker">
        <view v-for="img in imageList" :key="img.name" class="image-picker-item" @click="insertImageName(img.name)">
          <image :src="img.src" class="picker-img" mode="aspectFill" />
          <view class="picker-label">{{ img.name }}</view>
        </view>
        <view class="picker-close" @click="showImagePicker = false">收起 ↑</view>
      </view>
    </view>
    <!-- 多级弹出导航菜单 -->
    <view v-if="showMenu" class="nav-menu-mask" @click="showMenu = false">
      <view class="nav-menu" @click.stop>
        <view class="nav-menu-close" @click="showMenu = false">×</view>
        <template v-for="(item, i) in menuList">
          <view class="nav-menu-item" :key="item.name">
            <view class="nav-menu-main" @click="toggleMenu(i)">
              <text>{{ item.name }}</text>
              <text v-if="item.children" class="arrow">{{ openMenuIndex === i ? '▲' : '▼' }}</text>
            </view>
            <view v-if="item.children && openMenuIndex === i" class="nav-sub-menu">
              <template v-for="(sub, j) in item.children">
                <view class="nav-sub-menu-item" :key="sub.name">
                  <view class="nav-menu-main" @click.stop="toggleSubMenu(j)">
                    <text>{{ sub.name }}</text>
                    <text v-if="sub.children" class="arrow">{{ openSubMenuIndex === j ? '▲' : '▼' }}</text>
                  </view>
                  <view v-if="sub.children && openSubMenuIndex === j" class="nav-third-menu">
                    <view class="nav-third-menu-item" v-for="third in sub.children" :key="third.name" @click="onMenuClick(third.name)">{{ third.name }}</view>
                  </view>
                  <view v-else-if="!sub.children" class="nav-third-menu-item" @click="onMenuClick(sub.name)">{{ sub.name }}</view>
                </view>
              </template>
            </view>
          </view>
        </template>
      </view>
    </view>

		<zk-swiper :list="bannerList" :height="500" :indicator="true" :autoplay="true" :interval="3000" :circular="true"
			:show-title="true" />

<!-- <view  class="grid   b-radius-10  margin-b12" :class="getMuNum(gridList.length)==5?'grid-c-5':'grid-c-4'">
								<view @click="cGo(item)" v-for="(item,idx) in gridList"  :key="idx" class="">
									<view class="h-80 flex f-a-c f-j-c"  >
										<image class="w-55 h-55" style="height:55px;border-radius: 25px; " :src="item.image " mode="aspectFill"></image>
									</view>
									<text class="f12-size t-color-9  flex f-a-c f-j-c">{{item.title}}</text>

								</view>

</view> -->

<grid-menu :list="gridList"></grid-menu>

<tabBar></tabBar>

  </view>
</template>

<script>
import rfItemPopup from '@/components/rf-item-popup';
import gridMenu from '@/components/grid_menu.vue';

export default {
  components: {
    rfItemPopup,
    gridMenu
  },
  data() {
    return {
      showMenu: false,
      openMenuIndex: null,
      openSubMenuIndex: null,
      searchValue: '',
      showCharPicker: false,
      specialChars: [
        'α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'κ', 'μ', 'ω', 'σ', 'τ', 'λ',
        'Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ', 'Ⅹ', 'Ⅺ',
        'Ⅻ', 'X Ⅲ', 'X Ⅳ', 'X Ⅴ', 'X Ⅵ', 'X Ⅶ', 'X Ⅷ'
      ],
      searchCategory: 'product',

				gridList: [{
                  title: '品牌故事1',
                  image: '/static/address/3.jpg',
                  link: '/static/food/4.jpg'
							},
							{
                  title: '全部产品',
                  image: '/static/address/3.jpg',
                  link: '/pages/product/list'
							},
							{
                title: '促销活动',
                image: '/static/address/3.jpg',
                link: '/static/food/4.jpg'
							},
							{
                  title: '联系我们',
                  image: '/static/address/3.jpg',
                  link: '/static/food/4.jpg'
							}
						],

      menuList: [
        {
          name: '首页',
        },
        {
          name: '产品中心',
          children: [
            {
              name: '流式抗体',
              children: [
                { name: '小鼠流式抗体' },
                { name: '人流式抗体' },
                { name: '兔流式抗体' }
              ]
            },
            {
              name: 'ELISA试剂盒',
              children: [
                { name: '人ELISA' },
                { name: '小鼠ELISA' },
                { name: '大鼠ELISA' }
              ]
            },
            { name: '细胞功能检测试剂盒' }
          ]
        },
        {
          name: '服务支持',
          children: [
            { name: '技术支持' },
            { name: '资料下载' },
            { name: '常见问题' }
          ]
        },
        {
          name: '关于我们',
          children: [
            { name: '公司简介' },
            { name: '联系我们' },
            { name: '加入我们' }
          ]
        }
      ],
      imageList: [
        { src: '/static/images/pic1.png', name: '图片1' },
        { src: '/static/images/pic2.png', name: '图片2' },
        { src: '/static/images/pic3.png', name: '图片3' }
      ],



			bannerList: [{
					image: '/static/address/1.jpg',
					title: '加入我们的大家庭 - 携手共创辉煌未来'
				},
				{
					image: '/static/address/2.jpg',
					title: '20年品牌沉淀 - 数千家门店的选择'
				},
				{
					image: '/static/address/3.jpg',
					title: ''
				}
			],
			investmentInfo: [{
					value: '15-30万',
					label: '投资金额'
				},
				{
					value: '20-40㎡',
					label: '店面面积'
				},
				{
					value: '3-6个月',
					label: '回本周期'
				},
				{
					value: '40%-50%',
					label: '利润率'
				}
			],
			specialDishes: [{
					name: '红烧狮子头',
					price: '68',
					image: '/static/food/1.jpg'
				},
				{
					name: '清蒸鲈鱼',
					price: '88',
					image: '/static/food/2.jpg'
				},
				{
					name: '北京烤鸭',
					price: '128',
					image: '/static/food/3.jpg'
				},
				{
					name: '宫保鸡丁',
					price: '48',
					image: '/static/food/4.jpg'
				}
			],

			headquarters: {
				address: '上海市浦东新区陆家嘴西路168号',
				phone: '021-12345678',
				businessHours: '周一至周日 10:00-22:00'
			},
			stores: [{
					name: '静安寺店',
					address: '上海市静安区南京西路1686号',
					phone: '021-87654321',
					businessHours: '周一至周日 10:00-22:00'
				},
				{
					name: '徐家汇店',
					address: '上海市徐汇区虹桥路1号',
					phone: '021-98765432',
					businessHours: '周一至周日 10:00-22:00'
				},
				{
					name: '五角场店',
					address: '上海市杨浦区政立路489号',
					phone: '021-23456789',
					businessHours: '周一至周日 10:00-22:00'
				}
			],
			showAttrPopup: false,
      product: {
        base_attribute_format: []
      }
    }
  },
  methods: {
		getMuNum(len) {
			if(len%5 ==0){
				return 5
			}else{
				return 4
			}

		},
    toggleMenu(i) {
      if (this.openMenuIndex === i) {
        this.openMenuIndex = null;
        this.openSubMenuIndex = null;
      } else {
        this.openMenuIndex = i;
        this.openSubMenuIndex = null;
      }
    },
    toggleSubMenu(j) {
      if (this.openSubMenuIndex === j) {
        this.openSubMenuIndex = null;
      } else {
        this.openSubMenuIndex = j;
      }
    },
    onMenuClick(name) {
      this.showMenu = false;
      this.openMenuIndex = null;
      this.openSubMenuIndex = null;
      // 可在此处处理菜单跳转逻辑
      // uni.navigateTo({ url: ... })
    },
    insertImageName(name) {
      this.searchValue += name;
      // this.showImagePicker = false;
    },
    insertChar(char) {
      this.searchValue += char;
      // this.showCharPicker = false;
    },
    onInputBlur() {
      setTimeout(() => {
        this.showCharPicker = false;
      }, 100);
    },
    // 在methods中添加跳转方法
    goToAllProducts() {
      uni.navigateTo({ url: '/pages/product/index' });
    },
    cGo(item) {
      console.log(item.link)
      if (item.link) {
        // 判断是否为tabBar页面
        if (item.link === '/pages/product/list') {
          uni.switchTab({ url: item.link });
        } else {
          uni.navigateTo({ url: item.link });
        }
        return;
      }
      // 原有逻辑（如有其它跳转或处理）
      // ...
    },
  }
}
</script>

<style scoped>

.header { background: #fff; padding-bottom: 0; }
.header-bar { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 24rpx 0 24rpx; }
.header-logo { height: 56px; }
.header-menu { width: 56rpx; height: 56rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.menu-bar { width: 36rpx; height: 5rpx; background: #e53935; margin: 4rpx 0; border-radius: 3rpx; }
.search-row { display: flex; align-items: center; padding: 18rpx 10rpx; background: #fff; border-radius: 16rpx; margin: 20rpx 24rpx 0 24rpx; }
.search-category-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
/* search-category-select-wrapper 边框 */
.search-category-select-wrapper {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.search-category {
  background: #fff0f0;
  border-radius: 10rpx;
  padding: 0 38rpx 0 28rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #222;
  font-weight: normal;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.select-arrow {
  position: absolute;
  right: 18rpx;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 22rpx;
  color: #888;
}
.search-input { flex: 1; height: 66rpx; border: none; background: #fff8f8;
   border-radius: 10rpx; padding: 0 18rpx; font-size: 30rpx; margin-right: 14rpx; color: #222; }
/* search-input 边框 */
.search-input {
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}
.search-input {
  /* 保证输入内容和placeholder都垂直居中 */
  display: flex;
  align-items: center;
}
/* 针对uni-app/微信小程序等环境，若需兼容placeholder垂直居中，可加： */
.search-input::-webkit-input-placeholder {
  line-height: 66rpx;
}
.search-input:-moz-placeholder {
  line-height: 66rpx;
}
.search-input::-moz-placeholder {
  line-height: 66rpx;
}
.search-input:-ms-input-placeholder {
  line-height: 66rpx;
}
.search-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  height: 66rpx;
  width: 80rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12rpx;
}
.search-icon {
  display: block;
  margin: 0 auto;
}

.section { margin: 32rpx 0; background: #fff; border-radius: 18rpx; padding: 32rpx 24rpx; }
.section-title-row {
  display: flex;
  align-items: flex-end;
  gap: 18rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #e53935;
  letter-spacing: 1rpx;
  margin-bottom: 0;
  line-height: 1;
}
.section-subtitle {
  color: #666;
  font-size: 26rpx;
  margin-bottom: 0;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: 2rpx; /* 你可以微调这个值，比如2rpx、3rpx、4rpx，看哪个最齐 */
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
}
.product-item {
  flex: 0 0 calc(50% - 18rpx);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff8f8;
  border-radius: 14rpx;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 32rpx;
}


.product-item:active { transform: scale(1.03); }
.product-img { width: 180rpx; height: 120rpx; border-radius: 10rpx; margin-bottom: 10rpx; object-fit: cover; }
.product-name { text-align: center; font-size: 28rpx; color: #222; font-weight: 500; }
.news-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.news-tab { padding: 10rpx 32rpx; border-radius: 32rpx; background: #fff0f0; color: #222; font-size: 28rpx; font-weight: 500; transition: background 0.2s, color 0.2s; }
.news-tab.active { background: #e53935; color: #fff; }
.news-list { }
.news-item { display: flex; flex-direction: column; padding: 16rpx 0; border-bottom: 1px solid #f5c6c6; }
.news-title { font-size: 30rpx; font-weight: 500; color: #222; }
.news-date { color: #666; font-size: 24rpx; }
.feature-tabs { display: flex; gap: 20rpx; margin-bottom: 20rpx; }
.feature-tab { padding: 10rpx 40rpx; border-radius: 12rpx 12rpx 0 0; background: #fff0f0; color: #222; font-size: 30rpx; font-weight: 500; }
.feature-tab.active { background: #e53935; color: #fff; }
.feature-content { }
.feature-box { background: linear-gradient(90deg, #fff0f0 60%, #fff 100%); border-radius: 12rpx; padding: 28rpx; margin-bottom: 28rpx; }
.feature-box-title { font-size: 30rpx; font-weight: bold; margin-bottom: 14rpx; color: #e53935; }
.feature-box-list { color: #fff; background: #222; border-radius: 10rpx; padding: 18rpx; margin-bottom: 10rpx; font-size: 26rpx; }
.feature-box-link { color: #222; text-align: right; font-size: 28rpx; margin-top: 10rpx; }
.feature-card { background: #fff; border-radius: 12rpx; margin-bottom: 18rpx; padding: 18rpx; transition: box-shadow 0.2s; }
.feature-card:active { }
.feature-card-header { display: flex; align-items: center; gap: 14rpx; }
.feature-card-logo { font-size: 30rpx; color: #e53935; font-weight: bold; }
.feature-card-title { font-size: 30rpx; font-weight: bold; color: #e53935; }
.feature-card-img { width: 100%; height: 130rpx; border-radius: 10rpx; margin: 14rpx 0; object-fit: cover; }
.feature-card-list { font-size: 26rpx; color: #333; margin-bottom: 10rpx; }
.feature-card-btn { background: #222; color: #fff; border: none; border-radius: 10rpx; padding: 10rpx 36rpx; font-size: 28rpx; }
.footer { background: #fff; border-radius: 18rpx 18rpx 0 0; margin-top: 40rpx; padding: 32rpx 0 0 0; }
.footer-company { color: #666; font-size: 24rpx; text-align: center; margin-bottom: 18rpx; }
.footer-qrcodes { display: flex; justify-content: center; gap: 56rpx; margin-bottom: 18rpx; }
.qrcode-box { display: flex; flex-direction: column; align-items: center; }
.qrcode-img { width: 120rpx; height: 120rpx; border-radius: 10rpx; background: #fff0f0; }
.qrcode-label { font-size: 24rpx; color: #666; margin-top: 6rpx; }
.footer-nav { display: flex; justify-content: space-around; background: #e53935; border-radius: 0 0 18rpx 18rpx; padding: 18rpx 0; }
.footer-nav-item { color: #fff; font-size: 30rpx; font-weight: 500; }
.nav-menu-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  justify-content: flex-end;
}
.nav-menu {
  width: 400rpx;
  background: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 60rpx 0 0 0;
  overflow-y: auto;
  position: relative;
}
.nav-menu-close {
  position: absolute;
  top: 18rpx;
  right: 24rpx;
  font-size: 48rpx;
  color: #888;
  z-index: 10;
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nav-menu-close:active {
  background: #e53935;
  color: #fff;
}
.nav-menu-item {
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-menu-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 48rpx;
  font-size: 32rpx;
  color: #222;
  cursor: pointer;
  height: 88rpx;
  box-sizing: border-box;

  .arrow {
    font-size: 28rpx;
    color: #e53935;
    margin-left: 12rpx;
    line-height: 1;
    height: 28rpx;
    display: flex;
    align-items: center;
  }
}

.nav-sub-menu {
  background: #fafafa;
}
.nav-sub-menu-item {
  border-bottom: 1rpx solid #f0f0f0;

  .nav-menu-main {
    height: 80rpx;
    padding: 0 48rpx;
    font-size: 28rpx;
  }
}
.nav-third-menu {
  background: #f5f5f5;

  .nav-third-menu-item {
    height: 80rpx;
    padding: 0 72rpx;
    font-size: 28rpx;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
.nav-third-menu-item:active {
  background: #f7f7f7;
}
.product-item:nth-child(2n+1):last-child {
  flex-basis: 100%;
  max-width: 100%;
}
.image-picker {
  display: flex;
  gap: 16rpx;
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 12rpx;
  margin: 0 24rpx 16rpx 24rpx;
  flex-wrap: wrap;
  align-items: center;
}
.image-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-right: 12rpx;
}
.picker-img {
  width: 48rpx;
  height: 48rpx;
  border-radius: 6rpx;
  margin-bottom: 4rpx;
}
.picker-label {
  font-size: 22rpx;
  color: #333;
}
.picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-left: 16rpx;
  cursor: pointer;
}
.char-picker-popup {
  position: absolute;
  left: 0;
  right: 0;
  top: 80rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 18rpx 24rpx 12rpx 24rpx;
  margin: 0 0 0 0;
}
.char-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.char-picker-title {
  color: #888;
  font-size: 26rpx;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10rpx;
  line-height: 2;
  height: 40cqw;
  display: flex;
  align-items: flex-start;
}
.char-picker-content-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.char-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 4rpx;
  justify-content: space-between;
}
.char-picker-char {
  color: #1976d2;
  font-size: 30rpx;
  cursor: pointer;
  margin-right: 8rpx;
  transition: color 0.2s;
}
.char-picker-char:active {
  color: #e53935;
}
.char-picker-close {
  color: #e53935;
  font-size: 26rpx;
  margin-top: 8rpx;
  text-align: right;
  cursor: pointer;
}
.attr-btn {
  background: #e4393c;
		color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
}

.attr-group {
		margin-bottom: 20rpx;
}

.attr-name {
  font-size: 28rpx;
		color: #666;
  margin-bottom: 10rpx;
}

.attr-values {
		display: flex;
  flex-wrap: wrap;
}

.attr-value {
  font-size: 26rpx;
		color: #333;
  margin-right: 20rpx;
		margin-bottom: 10rpx;
  background: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
	}

.no-attr {
  text-align: center;
  color: #999;
		font-size: 28rpx;
  padding: 40rpx 0;
	}
</style>
